<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小u课堂</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="./img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="javascript:;">首页</a></li>
                <li><a href="./pages/online.html">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyword">
                <img src="./img/index/search.png" alt="" id="goToSearch">
            </div>
            <div class="login" id="login" style="display: inline-block;">
                <a href="./pages/loginAndRegister/login.html">登陆</a>
                /
                <a href="./pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" id="user" style="display: none;">
                <img src="" alt="" id="touxiang">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li id="course">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li><a href="./pages/userSeting.html">个人中心</a></li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <!-- banner -->
        <div class="banner">
            <ul class="img" id="banner-slider">
                <!-- <li class="active"><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner1.png" alt=""></li>
                <li><img src="./img/index/tbanner3.png" alt=""></li> -->
            </ul>
            <ul class="list" id="banner-dots">
                <!-- <li class="high">24小时不断电大课堂</li>
                <li>内容不够2</li>
                <li>内容不够3</li> -->
            </ul>
        </div>

        <!-- 同步课程 -->
        <div class="online">
            <div class="title">
                <span class="line"></span>
                <span class="cont">同步课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id='course-tong'>
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">免费学习</div>
                            </div>
                        </li>
                        <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：北京</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>

        <!-- 页面广告 -->
        <div class="contBanner">
            <img src="./img/index/WechatIMG20.png" alt="">
        </div>


        <!-- 精品课程 -->
        <div class="goodClass">
            <div class="title">
                <span class="line"></span>
                <span class="cont">精品课程</span>
                <span class="more">更多课程<i class="iconfont icon-right1"></i>
                </span>
            </div>
            <div class="onlineCont">
                <div class="content">
                    <ul id="course-jing">
                        <!-- <li>
                            <div class="top">
                                <span class="rj">人教版</span>
                                <img src="./img/index/banner1.png" alt="" class="m">
                                <p>学科：英语</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>行政管理专业班</span>
                                    <span class="time">地区：天津</span>
                                </div>
                                <div class="right">50元</div>
                            </div>
                        </li> -->
                    </ul>
                </div>
                <div class="rightCont">
                    <img src="./img/index/good_banner7.png" alt="">
                </div>
            </div>
        </div>

        <div class="footB">
            <div><img src="./img/index/foot1.png" alt=""></div>
            <div><img src="./img/index/foot2.png" alt=""></div>
        </div>

        <div class="fix">
            <div class="lesson">
                <img src="./img/index/mylesson.png" alt="">
            </div>
            <div class="top">
                <img src="./img/index/gotop.png" alt="">
            </div>
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <script src="js/ujiuye.js"></script>
    <script src="js/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="./utils/http.js"></script>
    <script>


        $('.out').click(function () {
            localStorage.clear()
            location.href = './index.html'

        })
        let mid = localStorage.getItem('mid')

        if (mid) {
            $('#login').attr('style', 'display: none;')
            $('#user').attr('style', 'display: inline-block;')
            getUser()
        } else {
            $('#login').attr('style', 'display: inline-block;')
            $('#user').attr('style', 'display: none;')
        }


        async function getUser() {
            let res = await Http({
                url: '/api/user',
                data: {
                    mid
                }
            })
            let userStr = res.result.result
            $('#touxiang').attr('src', userStr.head_photo_url)
        }


        // console.log( Http );

        //获取轮播图的方法
        async function getBanners() {
            // Http({
            //     url: 'http://localhost:3000/api/banners'
            // }).then(res => {
            //     console.log(res, '我是结果');
            // })
            //1. 发送ajax请求
            let res = await Http({
                url: '/api/banners'
            })

            //2. 拿到数据
            let banners = res.result.result
            // console.log( banners );
            //3. 根据业务和html字符模板拼接数据
            let imgsStr = ''
            let dotStr = ''
            banners.forEach(item => {
                // console.log( item );
                imgsStr += `<li><img src="${item.image_src}" alt=""></li>`
                dotStr += `<li>${item.title}</li>`
            })
            // console.log( imgsStr );
            //4. 渲染到页面上
            $('#banner-slider').html(imgsStr)
            $('#banner-dots').html(dotStr)

            lunBoTu()//当请求ajax 拿到结果并追加到页面上以后 要调用此方法
            //如果前端某些元素有特效，一定是要把元素追加到页面上再操作
        }
        getBanners()

        async function getTbCrouse() {

            let res = await Http({
                url: '/api/courseinfo',
                data: {
                    type: 1
                }
            })
            // console.log(res);
            let course = res.result.result
            let courseStr = ''
            course.forEach(item => {
                courseStr += `<li onclick="goToDetail('${item.cid}')">
                            <div class="top">
                                <span class="rj">${item.type_name}</span>
                                <img src="${item.image_src}" alt="" class="m">
                                <p>学科：${item.subject_name}</p>
                            </div>
                            <div class="bottom">
                                <div class="left">
                                    <span>${item.title}</span>
                                    <span class="time">地区：${item.area_name}</span>
                                </div>
                                <div class="right">${item.price == 0 ? '免费学习' : item.price + '元'}</div>
                            </div>
                        </li>`
            })
            $('#course-tong').html(courseStr)
        }
        getTbCrouse()

        async function getJpCrouse() {
            let res = await Http({
                url: '/api/courseinfo',
                data: {
                    type: 2
                }
            })

            let course = res.result.result

            let courseStr = ''
            course.forEach(item => {
                courseStr += `<li onclick="goToDetail('${item.cid}')">
                <div class="top">
                    <span class="rj">${item.type_name}</span>
                    <img src="${item.image_src}" alt="" class="m">
                    <p>学科：${item.subject_name}</p>
                </div>
                <div class="bottom">
                    <div class="left">
                        <span>${item.title}</span>
                        <span class="time">地区：${item.area_name}</span>
                    </div>
                    <div class="right">${item.price == 0 ? '免费学习' : item.price + '元'}</div>
                </div>
            </li>`
            })
            $('#course-jing').html(courseStr)

        }
        getJpCrouse()

        function goToDetail(id) {
            // return
            // alert('跳转到详情页')
            location.href = './pages/videoDetail.html?id=' + id
        }

        $('#goToSearch').on('click', function () {
            // alert('1234')
            // alert( $('#keyword').val() )
            if ($('#keyword').val() == '') {
                alert('请输入关键字')
                return
            }

            // alert('跳转到搜索页')
            location.href = './pages/search_list.html?keyword=' + $('#keyword').val()
        })
        $('#course').click(function () {
            location.href = './pages/course.html'
        })
    </script>
</body>

</html>